<template>
 <div class="bottom">

  <md-theme :md-name="playground.theme">
      <md-bottom-bar md-shift>
        <md-bottom-bar-item active @click="setTheme('blue')" md-icon="ondemand_video">项目</md-bottom-bar-item>
        <md-bottom-bar-item @click="setTheme('teal')" md-icon="music_note">发现</md-bottom-bar-item>
        <md-bottom-bar-item @click="setTheme('indigo')" md-icon="photo">我的</md-bottom-bar-item>
      </md-bottom-bar>
  </md-theme>
 </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      playground: {
        theme: 'default'
      }
    }
  },
  components: {},
  methods: {
    setTheme (theme) {
      this.playground.theme = theme
      this.$material.setCurrentTheme(theme)
    }
  }
}
</script>

<style scoped>

</style>
